<template>
  <div class="contain">
    <div class="table-content">
      <!--<table-list ref="tableList" :tableConfig='configList'>-->
        <!--&lt;!&ndash;<el-table-column slot="content"  align="center" label="公告内容">&ndash;&gt;-->
        <!--&lt;!&ndash;<template slot-scope="scope">&ndash;&gt;-->
        <!--&lt;!&ndash;<div v-html="scope.row.mobile">{{scope.row.content}}</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</template>&ndash;&gt;-->
        <!--&lt;!&ndash;</el-table-column>&ndash;&gt;-->
        <!--<el-table-column label="读数" slot="input" align="center" >-->
          <!--<template slot-scope="scope">-->
            <!--<el-input v-model="type" placeholder="请输入"></el-input>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column class="btn"  label="操作" slot="btn" align="center" >-->
          <!--<template slot-scope="scope">-->
            <!--<el-button  @click="handleReadout(item)" type="primary" size="small">抄表</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
      <!--</table-list>-->
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px;text-align: center">
        <el-table-column
          prop="gardenName"
          label="小区"
          width="180">
        </el-table-column>
        <el-table-column
          prop="unitName"
          label="单元">
        </el-table-column>
        <el-table-column
          prop="buildName"
          label="楼栋">
        </el-table-column>
        <el-table-column
          prop="houseRoomNo"
          label="房间号">
        </el-table-column>
        <el-table-column
          prop="houseFloor"
          label="楼层">
        </el-table-column>
        <el-table-column
          prop="intYM"
          label="年份">
        </el-table-column>
        <el-table-column
          prop="readoutsType"
          label="类型">
          <template slot-scope="scope">
            <div v-if="scope.row.readoutsType == 'water'">水表</div>
            <div v-else>电表</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="input"
          label="读数" width="180">
          <template slot-scope="scope">
            <el-input v-model.number="scope.row.input" placeholder="请输入读数"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作">
          <template slot-scope="scope">
            <el-button size="small" style="color: #fff" @click="handleReadout(scope.row)">抄表</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  export default{
    data(){
      return {
        configList:{
          url:CONSTANT.URL.L_RENTAL.UNSETLIST,
          configList:[
            {
              label:'小区',
              prop:'gardenName',
            },
            {
              label:'单元',
              prop:'unitName',
            },
            {
              label:'楼栋',
              prop:'buildName',
            },
            {
              label:'房间号',
              prop:'houseRoomNo',
            },
            {
              label:'楼层',
              prop:'houseFloor',
            },
            {
              label:'年份',
              prop:'renterSexText',
            },
            {
              label:'类型',
              prop:'rentalRentprice',
            },
            {
              slot:"input"
            },
            {
              slot:'btn'
            }
          ],
          param:{
          },
          type:'',
          width:'',
          isPagination:true
        },
        tableData: []
      }
    },
    components: {
      'table-list':() => import('../common/my-table')
    },
    created() {
      this.identify = sessionStorage.getItem("identify");
    },
    mounted() {
      this.getReadoutsList()
    },
    methods: {
      getList(){
        this.$refs.tableList.getList()
      },
      getReadoutsList() {
        let url = CONSTANT.URL.L_RENTAL.UNSETLIST;
        common.requestAjax(url, {}, {}, (res) => {
          if (res.status == 200) {
            this.tableData = res.data.bussData;
            let newTableData = []
            this.tableData.map( (item, index) => {
              item.unsetReadouts.map( (readout, i) => {
                newTableData.push(Object.assign(readout, item, {input: ""}))
              })
            })
            this.tableData = newTableData
          }
        })
      },
      handleReadout(item) {
        if (!item.input) {
          this.$message({
            type: "warning",
            messsage: "请输入读数"
          })
          return false;
        }
        let params = {
          intYM: item.intYM,
          readouts: item.input,
          readoutsType: item.readoutsType,
          rentalId: item.id
        }, url = CONSTANT.URL.L_READOUTS.ADD;
        common.requestAjax(url, JSON.stringify(params), {}, (res) => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.msg
            })
          } else {
            this.$message({
              type: "warning",
              message: res.msg
            })
          }
        })
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    },
  }
</script>

<style lang="scss">
  .contain {
    .el-dialog__body{ padding-left: 0;padding-top: 30px;border-top:1px solid #dedede;}
    .dialog-con{
      background-color: #f5f5f5;
      display: flex;
      justify-content: space-between;
      ul{
        width:28%;list-style: none;padding:0;font-size:14px;float: left;margin-top:0;z-index:999;
        li{ list-style: none;height:60px;line-height:60px;text-align: center;display: block;}
        li.active{color:#21b5cc;background-color: #fff;font-size:16px;border-right:2px solid #21b5cc;}
        //   li:hover{font-size:16px; }
      }
      .tab-content{ width: 70%;display: inline-block;padding-left:10%;background-color: #fff;min-height:300px;
        .sort{
          .sort_name{ font-weight: 600;margin-bottom: 5px;}
          .group-list{ padding-left: 20px;
            .el-radio{display:block;margin-left: 0;margin-bottom: 3px;}
          }
        }
      }
      .el-button--default{background-color: #fff !important;}
    }
  }
</style>
